<template>
    <div class="main-content">
        <div class="layout-breadcrumb">
            <Breadcrumb>
                <BreadcrumbItem href="#">客户</BreadcrumbItem>
                <BreadcrumbItem href="#">客户管理</BreadcrumbItem>
                <BreadcrumbItem href="#">新建客户</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card style="matgin-top:20px;">
            <div class="layout-content" style="margin:15px;">
                <Row>
                    <Col span="12">
                    <h3 class="title">客户信息</h3>
                    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                        <Form-item prop="email">
                            <Input v-model="formValidate.email" placeholder="请填入邮箱"></Input>
                        </Form-item>
                        <Form-item prop="password">
                            <Input v-model="formValidate.password" placeholder="请填入密码"></Input>
                        </Form-item>
                        <Form-item prop="password_confirm">
                            <Input v-model="formValidate.password_confirm" placeholder="请确认您的密码"></Input>
                        </Form-item>
                        <h3 class="title">客户资料</h3>
                        <Form-item prop="company">
                            <Input v-model="formValidate.company" placeholder="公司全称"></Input>
                        </Form-item>
                        <Form-item prop="business_license_num">
                            <Input v-model="formValidate.business_license_num" placeholder="营业执照注册号"></Input>
                        </Form-item>
                        <Form-item prop="business_license_img">
                            <Row type="flex" justify="space-between">
                                <Col span="18">
                                <Input v-model="formValidate.business_license_img" placeholder="上传营业执照" disabled></Input>
                                </Col>
                                <Col span="6" offset="0">
                                <Upload :action="uploadUrl" :on-success="postValue" :show-upload-list="false" name="image">
                                    <i-button type="ghost" icon="ios-cloud-upload-outline">上传营业执照</i-button>
                                </Upload>
                                </Col>
                            </Row>
                        </Form-item>
                        <Form-item prop="address">
                            <Input v-model="formValidate.address" placeholder="公司地址"></Input>
                        </Form-item>
                        <h3 class="title">联系人信息</h3>
                        <Form-item prop="name">
                            <Input v-model="formValidate.name" placeholder="联系人姓名"></Input>
                        </Form-item>
                        <Form-item prop="phone">
                            <Input v-model="formValidate.phone" placeholder="手机号码"></Input>
                        </Form-item>
                        <Form-item prop="qq">
                            <Input v-model="formValidate.qq" placeholder="QQ号码"></Input>
                        </Form-item>
                    </i-form>
                    <Button type="primary" size="large" style="width:200px;" @click="handleSubmit('formValidate')">提交审核</Button>
                    </Col>
                </Row>
            </div>
        </Card>
    </div>
</template>
<script>
export default {
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请重复输入您的密码'));
      } else if (value !== this.formValidate.password) {
        callback(new Error('两次输入密码不匹配'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入您的密码'));
      } else if (value.length < 6) {
        callback(new Error('请输入密码不少于6位数的密码，建议字母与数字混合使用'));
      } else {
        callback();
      }
    };
    return {
      inputValue: '',
      formValidate: {
        email: '',
        password: '',
        password_confirm: '',
        company: '',
        business_license_num: '',
        business_license_img: '',
        address: '',
        name: '',
        phone: '',
        qq: ''
      },
      ruleValidate: {
        email: [
          {
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          },
          {
            type: 'email',
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        password_confirm: [
          {
            validator: validatePassCheck,
            trigger: 'blur'
          }
        ],
        company: [
          {
            required: true,
            message: '请输入公司全称',
            trigger: 'blur'
          }
        ],
        business_license_num: [
          {
            required: true,
            message: '请输入营业执照注册号',
            trigger: 'blur'
          }
        ],
        business_license_img: [
          {
            required: true,
            message: '请上传公司营业执照',
            trigger: 'blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入公司地址',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入联系人姓名',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur'
          }
        ],
        qq: [
          {
            required: true,
            message: '请输入QQ号码',
            trigger: 'blur'
          }
        ]
      },
      uploadUrl: 'http://192.168.1.12:8080/agent_api/imageUploader/upload'
    //   uploadUrl: 'http://api.c.topeffects.cn/c/agent_api/imageUploader/upload/'
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.postData();
        } else {
          this.$Message.error('请检查信息是否全部填写完整且正确无误!');
        }
      });
    },
    postData() {
      let vm = this;
      let params = {
        type: 'post',
        url: 'member/create',
        params: {
          email: vm.formValidate.email,
          password: vm.formValidate.password,
          password_confirm: vm.formValidate.password_confirm,
          company: vm.formValidate.company,
          business_license_num: vm.formValidate.business_license_num,
          business_license_img: vm.formValidate.business_license_img,
          address: vm.formValidate.address,
          name: vm.formValidate.name,
          phone: vm.formValidate.phone,
          qq: vm.formValidate.qq
        },
        sCallback(data) {
          console.log(data);
          if (data.code === 10005) {
            vm.$Message.error('邮箱已被注册!');
          } else {
            vm.$Message.success('提交成功');
            vm.$router.push({
              path: '/home/client'
            });
          }
        },
        eCallback(e) {
          vm.$Message.error(e.data.msg);
        }
      };
      vm.http.request(params);
    },
    postValue(file) {
      var picname = file.msg.name;
      this.formValidate.business_license_img = picname;
    }
  }
};
</script>
<style lang="stylus" scoped>
.title {
    margin-bottom: 10px;
}

.ivu-upload {
    float: right;
}

.ivu-btn {
    width: 100%;
}
</style>
